import { FC, useState } from "react"
import { connect } from "react-redux"
import twitter from '@/assets/images/index/twitter.png'
import discord from '@/assets/images/index/discord.png'
import github from '@/assets/images/index/github.png'
import telegram from '@/assets/images/index/telegram.png'
import "./index.scss"

interface IJoinMeta {}

const JoinMeta: FC<IJoinMeta> = () => {

    const [ list ] = useState([
        {
            img: twitter,
            title: 'Twitter',
            link: 'https://twitter.com/ShuiGames'
        },
        {
            img: discord,
            title: 'Discord',
            link: 'https://discord.gg/9jreFbTsS7'
        },
        {
            img: telegram,
            title: 'Telegram',
            link: 'https://t.me/ShuiGames'
        },
        {
            img: github,
            title: 'Github',
            link: 'https://github.com/ShuiGame'
        },
    ])

	return (
		<div id="join-meta">
            <div className="join-meta-title">
                Jo
                <span className="join-meta-title-in">in </span>
                Meta D
                <span className="join-meta-title-a">A</span>
                O
            </div>
            <p className="join-meta-desc">SHUI Metaverse Community DAO</p>
            <div className="join-dao-box">
                {
                    list.map((item, index) => (
                        <a href={item.link} className="join-item flex-between" key={index}>
                            <div className="flex-align-center">
                                <img src={item.img} alt="" />
                                <div className="join-dao-box-title">{item.title}</div>
                            </div>
                            <div className="join-dao-box-link">{item.link}</div>
                        </a>
                    ))
                }
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(JoinMeta)